<template>
    	<view class="list-item" v-for="item in props.list" :key="item.id" @click="navigationUrl(item)">
				<!-- 左侧：图标 + 主标题 -->
				<view class="item-left">
					<image class="img " :src="item.photo" mode="aspectFill"></image>
				</view>

				<!-- 中间：主标题 + 详情 -->
				<view class="item-content">
					<text class="item-title text11">{{ item.title }}</text>
					<text class="item-desc text11">{{ item.location }}</text>
					<text class="item-desc text11">{{ item.date }}</text>
				</view>


				<!-- 右侧箭头 -->
				<!-- <wd-icon custom-class="item-arrow"	 name="arrow-right" size="19px"></wd-icon> -->
				<wd-button size="small" v-show="props.disabled==1?true:false">
					<text>报名</text>
					<wd-icon name="chevron-right" size="13px"></wd-icon>
					</wd-button>
			</view>
</template>
<script setup>
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
	const fontSizeStore = useFontSizeStore();
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		defineProps
	} from "vue"
	
	// 路由实例 - 保留原逻辑
	const router = useRouter();
	const props = defineProps(["list","disabled"])

	const navigationUrl=(item)=>{
		router.push({
			name:"volunteer_activityDetail",
			params:{
				id:item.id,
				type:1
			}
		})
	}
</script>
<style lang="less" scoped>
	@import '@/static/styles/colors.less';
	@import '@/static/styles/constants.less';

.list-item {
		display: flex;
		align-items: center;
		// height: @item-height;
		border-radius: @layout-border-radius-sm;
		padding: 0rpx 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border: 1rpx solid @color-border-dark;
		position: relative;

		&:active {
			transform: scale(0.98);
			opacity: 0.8;
		}

		.item-left {
			flex: 0 0 140rpx;
			text-align: center;
			height: 140rpx;
			margin-right: 24rpx;
			background-color: red;
			padding: 20rpx 0;
			background-color: #fff;

			.img {
				width: 100%;
				height: 100%;
			}

		}

		.item-content {
			flex: 1;
			overflow: hidden;
		}

		.item-title {
			font-size: @h5-size;
			color: @color-text-dark;
			font-weight: 500;
			line-height: 1.4;
			display: block;
		}

		.item-desc {
			font-size: @h6-size;
			color: @color-text-secondary;
			line-height: 1.4;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 4rpx;
		}

		.item-arrow {
			// font-size: 36rpx;
			color: @color-text-placeholder;
			margin-left: auto;
			transform: rotate(0deg);
			transition: transform 0.3s;
		}
	}
    </style>